import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Card, Spin } from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './MatterDetail.less';
import { MatType } from '../../utils/city.js';
import FileViewer from '../../components/ReactFileViewer/file-viewer';
// import FileViewer from 'react-file-viewer';

const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const statusArray = ['待审核', '已审核', '已驳回'];

const tabList = [
  {
    key: 'detail',
    tab: '详情',
  },
];

function getFileType(upFileName) {
  const index1 = upFileName.lastIndexOf('.');
  const index2 = upFileName.length;
  const suffix = upFileName.substring(index1 + 1, index2);
  return suffix;
}

@connect(({ matdetail, loading }) => ({ matdetail, loading: loading.effects['matdetail/fetch'] }))
export default class MatterDetail extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    const { matId } = this.props.match.params;
    dispatch({
      type: 'matdetail/fetch',
      payload: { matId },
    });
  }

  onSubmit = matAuditStatus => {
    const { matId } = this.props.match.params;
    if (matAuditStatus === 0) {
      this.props.history.push('/matter/matterlib');
    } else {
      this.props.dispatch({
        type: 'matdetail/auditMat',
        payload: { matId, matAuditStatus },
        callback: () => this.props.history.push('/matter/matterlib'),
      });
    }
  };
  action = ischeck => {
    if (ischeck) {
      return null;
    } else {
      return (
        <Fragment>
          <ButtonGroup>
            <Button onClick={() => this.onSubmit(0)}>返回</Button>
            <Button onClick={() => this.onSubmit(2)}>驳回</Button>
          </ButtonGroup>
          <Button type="primary" onClick={() => this.onSubmit(1)}>
            通过
          </Button>
        </Fragment>
      );
    }
  };
  extra = ischeck => (
    <Row>
      <Col xs={24} sm={12}>
        <div className={styles.textSecondary}>状态</div>
        <div className={styles.heading}>{statusArray[ischeck]}</div>
      </Col>
    </Row>
  );

  render() {
    if (this.props.loading === false) {
      const record = this.props.matdetail.matinfo;
      const fileType = getFileType(record.matUrl);
      //console.log('fileType', fileType);
      // //console.log('loading', this.props.loading);
      const description = (
        <DescriptionList className={styles.headerList} size="small" col="2">
          <Description term="创建人">{record.author}</Description>
          <Description term="素材名">{record.fileName}</Description>
          <Description term="创建时间">{record.createTime}</Description>
          <Description term="单位">{record.organName}</Description>
        </DescriptionList>
      );
      // const ischeck = location?.state?.ischeck ? location.state.ischeck : false;
      // //console.log('record include?', record.matUrl.indexOf('.txt'));
      return (
        <PageHeaderLayout
          title="素材详情"
          logo={
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
          }
          action={this.action(record.matAuditStatus)}
          content={description}
          extraContent={this.extra(record.matAuditStatus)}
          tabList={tabList}
        >
          {/* <Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
          <Steps direction={stepDirection} progressDot={customDot} current={1}>
            <Step title="创建项目" description={desc1} />
            <Step title="部门审核" description={desc2} />
            <Step title="完成" />
          </Steps>
        </Card> */}
          <Card title="素材预览" style={{ marginBottom: 24 }} bordered={false}>
            <Row>
              <Col xl={16} lg={16} md={24} sm={24} xs={24}>
                {/* <img src={record.matUrl} controls alt="" /> */}
                {/* <WebTxt src={record.matUrl} /> */}
                <FileViewer
                  fileType={fileType}
                  className={styles.fileviewer}
                  filePath={record.matUrl}
                />
              </Col>

              <Col xl={8} lg={8} md={24} sm={24} xs={24}>
                <DescriptionList className={styles.descList} size="large" col="1">
                  <Description term="素材ID">{record.matId}</Description>
                  <Description term="素材名">{record.fileName}</Description>
                  <Description term="创建时间">{record.createTime}</Description>
                  <Description term="作者">{record.author}</Description>
                  <Description term="单位">{record.organName}</Description>
                </DescriptionList>
              </Col>
            </Row>
          </Card>
        </PageHeaderLayout>
      );
    } else {
      return <Spin size="large" className={styles.globalSpin} />;
    }
  }
}
